<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>首页</title>
</head>
<body>
    <!--周文芳修改-->
    修改部分
    <!-- 头部模块开始 -->
    <header>
        <!-- 导航栏 -->
        <div class="nav-bar">            
            <nav class="nav-l">
                <!-- logo -->
                <div class="logo">
                    <a href="index.html" title="qq阅读"></a>
                </div>
                <ul class="tab">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="sort.html">分类</a></li>
                    <li><a href="rank.html">排行榜</a></li>
                    <li><a href="community.html">广场</a></li>
                </ul>
            </nav>
            <nav class="nav-r">
                <a href="login.html" class="login">登录</a>
                <a href="register.html" class="reg">免费注册</a>
                <!-- search -->
                <form action="#" method="post" class="search">
                    <input type="text" placeholder="请输入书籍名或作者名">
                    <a href="#" class="ssicon"><img src="./img/icon/sys.ico" class=""></a>
                </form>
            </nav>            
        </div>
    </header>
    <!-- 轮播图模块 -->
    <div class="banner">
        <div class="banner-m">
            <!-- 图片 -->
            <div class="wrap container">
                <img src="./img/banner1.png" id="pic" alt="">
                
            </div>
            <!-- 指示器 -->
            <ol class="indicator">
                <li class="number"></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>        
    </div>
    <!-- 主要内容模块 -->
    <div class="main container">
        <!-- 男生精选 -->
        <div class="list">
            <div class="top-m">
                <a href="#" title="男生精选" class="list-title">
                    <span>男生精选</span><i class="icon-arrow-r"></i>
                </a>
            </div>
            <div class="list-main" style="background-image: url(./img/column-bg.png);">
                <div class="list-one" title="法力无边高大仙">
                    <div class="book">
                        <img src="./img/nan01.jpg" alt="法力无边高大仙">
                        <p class="name">法力无边高大仙</p>
                    </div>
                    <p class="intro">
                        风月宝鉴在手，证道无上金仙！我虚荣自私、贪财好色，偶尔还杀人放火，但我知道我是个好仙人——高贤同道有诗赞曰：淡泊名利不爱钱，冰清玉洁道心坚。仁德宽厚义当先，法力无边高大仙。
                    </p>
                    <div class="autor">
                        <a href="#">踏雪真人</a> <span class="text-b">14.8万读过</span>
                    </div>
                </div>
                <div class="list-one" title="我有一个修仙世界">
                    <div class="book">
                        <img src="./img/nan02.jpg" alt="我有一个修仙世界">
                        <p class="name">我有一个修仙世界</p>
                    </div>
                    <p class="intro">
                        陈莫白，仙门高三学子，正在努力复习准备考取大道院，本来他这辈子最大的梦想也就是筑基成功，直到他能穿越到另外一个修仙世界，然后，梦想就变了……                    
                    </p>
                    <div class="autor">
                        <a href="#">纯九莲宝灯</a> <span class="text-b">86.1万读过</span>
                    </div>
                </div>
                <div class="list-one" title="满唐华彩">
                    <div class="book">
                        <img src="./img/nan03.jpg" alt="满唐华彩">
                        <p class="name">满唐华彩</p>
                    </div>
                    <p class="intro">
                        盛唐繁花似锦，惊天裂变在即。天宝五载，他睁开眼，看到了“昭昭有唐，天俾万国”的盛世雄风，名将如云，疆土广袤；能臣如雨，仓廪丰盈；诗歌璀璨，文华耀目；美色倾城，歌舞升平。他也看到了满朝如痴如醉，骄固奢靡，争权不休；江山飘摇，积弊丛生；胡儿叛乱，人如草芥。渔阳鼙鼓动地来，他偏要让此唐不失华彩。【三万均订老书《终宋》已完结，量大管饱】
                    </p>
                    <div class="autor">
                        <a href="#">怪诞的表哥</a> <span class="text-b">40.1万读过</span>
                    </div>
                </div>
                <div class="list-one" title="轮回乐园">
                    <div class="book">
                        <img src="./img/nan04.jpg" alt="轮回乐园">
                        <p class="name">轮回乐园</p>
                    </div>
                    <p class="intro">
                        苏晓签订轮回契约，进入各个世界执行任务。他曾目睹一个世界崩灭为尘粒，也曾与被遗忘的王者持刃而战。暗鸦在低语，黑渊下巨兽咆哮。欢迎来到，轮回乐园……
                    </p>
                    <div class="autor">
                        <a href="#">那一只蚊子</a> <span class="text-b">690万读过</span>
                    </div>
                </div>
                <div class="list-one" title="诡秘之主">
                    <div class="book">
                        <img src="./img/nan05.jpg" alt="诡秘之主">
                        <p class="name">诡秘之主</p>
                    </div>
                    <p class="intro">
                        蒸汽与机械的浪潮中，谁能触及非凡？历史和黑暗的迷雾里，又是谁在耳语？我从诡秘中醒来，睁眼看见这个世界：枪械，大炮，巨舰，飞空艇，差分机；魔药，占卜，诅咒，倒吊人，封印物……光明依旧照耀，神秘从未远离，这是一段“愚者”的传说。
                    </p>
                    <div class="autor">
                        <a href="#">爱潜水的乌贼</a> <span class="text-b">599万读过</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 女生精选 -->
        <div class="list">
            <div class="top-m">
                <a href="#" title="女生精选" class="list-title">
                    <span>女生精选</span><i class="icon-arrow-r"></i>
                </a>
            </div>
            <div class="list-main" style="background-image: url(./img/column-bg1.png);">
                <div class="list-one" title="长安好">
                    <div class="book">
                        <img src="./img/nv01.jpg" alt="长安好">
                        <p class="name">长安好</p>
                    </div>
                    <p class="intro">
                        【隔壁短篇《岁时来仪》正在更新中，欢迎大家移步～】京城那位胆小娇弱的第一美人不幸落到了人贩子手中。京中众人摇头叹息：这波要完。千里之外，废物美人睁开眼睛，反手就把人贩子给卖了——……换了芯儿的少女挥霍着贩卖人贩子得来的银钱回到都城，才发现昔日的小弟如今都成了大佬，且一个个的都把“她”当作女儿养——一，二，三，四……所以，如今她竟有四个男妈妈?！……本文又名《美强惨女主重生后》《废物美人她为何突然倒拔垂杨柳》
                    </p>
                    <div class="autor">
                        <a href="#">非10</a> <span class="text-b">47.1万读过</span>
                    </div>
                </div>
                <div class="list-one" title="开局就被赶出豪门">
                    <div class="book">
                        <img src="./img/nv02.jpg" alt="开局就被赶出豪门">
                        <p class="name">开局就被赶出豪门</p>
                    </div>
                    <p class="intro">
                        一睁眼，白蔹穿到了一个声名狼藉的纨绔大小姐身上。听说她父亲是北城的新贵，白手起家声名远播；她的私生子大哥是个天才，考上市状元去了江京大学；私生子妹妹是隔壁国际班多才多艺的校花，温婉知礼；未婚夫是金融贵公子，校园学神，没拿正眼看过她……而她，就是个毫不起眼智商不高的普通人，开局就被赶出这个家门。白蔹：行吧，那她就好好学学习，努力做个普通人~众（迷之微笑脸）：……你最好是？？被发配到湘城的大小姐，没有背景，不学无术，人人都可以去踩上一脚……踩不动？？？？【人间独美懒散肆意谁惹她就弄死谁疯批女主vs高贵冷艳散发逼王之气智商碾压在场所有人男主】ps：男女主都很苏，主打一个没逻辑的爽文，请勿深究逻辑线，拜谢立意：爱学习，做好人。
                    </p>
                    <div class="autor">
                        <a href="#">一路烦花</a> <span class="text-b">96.6万读过</span>
                    </div>
                </div>
                <div class="list-one" title="他从地狱里来">
                    <div class="book">
                        <img src="./img/nv03.jpg" alt="他从地狱里来" height="120px">
                        <p class="name">他从地狱里来</p>
                    </div>
                    <p class="intro">                        
                        出版书名：既见君子有严重的共情障碍、轻微的述情障碍，趋近于0度负面p型人格，与罪犯只差了一条道德线。这是心理医生对戎黎的诊断。有人见过他满手是血的样子，有人见过他在枪林弹雨里抽烟的样子，也有人见过他漠然冰冷地踩着残肢断臂从火光里走来的样子。这些人都说，戎黎是个恶魔。但只有徐檀兮见过他因为夜盲而跌跌撞撞的样子，见过他发起床气的样子，见过他落地成盒后踢桌子的样子，见过他趴在她肩上要她亲他的样子。他说：“杳杳，如果你喜欢，我可以把枕头下的刀扔了，窝在祥云镇收一辈子的快递。”他说：“杳杳，别逃，你不管管我，我会下地狱的。”他抓着她的手，按在胸口：“我这里面是黑的，已经烂透了，你还要不要？”徐檀兮是个大家闺秀，不会说情话，就写了一封信，塞在亲手绣的荷包里送给他：“既见君子，云胡不喜。”就这样，谁也治不了的戎六爷收了人姑娘绣的荷包，还让那从来没有碰过纹身器材的姑娘在他心口纹了字。避雷：不是多重人格文，是前世今生文（围脖潇湘书院顾南西）
                    </p>
                    <div class="autor">
                        <a href="#">顾西南</a> <span class="text-b">299万读过</span>
                    </div>
                </div>
                <div class="list-one" title="大小姐她总是不求上进">
                    <div class="book">
                        <img src="./img/nv04.jpg" alt="大小姐她总是不求上进">
                        <p class="name">大小姐她总是不求上进</p>
                    </div>
                    <p class="intro">
                        （书名废+简介废+无CP+玄学）‘’所谓太素脉，为相术也，能观贵贱，预吉凶，算祸福，善人，敢让扶脉否？一脉算万金！”你看，赚钱多容易，上活不？啊呸！人活两世，秦流西的理想永远就是得过且过，毕竟世间总有人甘当咸鱼不求上进，而此等废物之事，让她来！可当一大家子凄凄惨惨戚戚的出现在面前，秦流西的咸鱼日子也跟着不复存在。面对岌岌可危要崩漏的秦家，婢女拿着空荡荡的钱匣子求营业，秦流西不得不肩负起大小姐的重任，持家，养长辈，鸡娃育儿！秦流西：我明明拿的是咸鱼剧本，谁给我偷换了？被大小姐怼得怀疑人生的堂妹：感觉大姐姐看我们像看麻烦一样！被大小姐揍得皮实教做人的秦四公子：大胆点，把感觉去掉！被大小姐鸡得自闭的秦小五一本正经掰着手指回答关于大姐姐一无是处的问题：她会驱邪捉鬼，会相面画符，会治病救人，对了，你问哪个？后来，有人问秦流西如果人生重来一次，梦想是什么？秦流西沉默了许久：不求上进苟百年！推荐完结文《老祖宗她是真的狂》
                    </p>
                    <div class="autor">
                        <a href="#">燕小陌</a> <span class="text-b">247万读过</span>
                    </div>
                </div>
                <div class="list-one" title="至尊三小姐">
                    <div class="book">
                        <img src="./img/nv05.jpg" alt="至尊三小姐">
                        <p class="name">至尊三小姐</p>
                    </div>
                    <p class="intro">                        
                        她，出身武术世家却是心思单纯的痴女，虽一心远离是非心机，却终被男友背叛。耳边干脆的枪声，昭示着她的重生。她，是世族莫家的废柴小姐，四岁丧父，其母不详，寄人篱下，身无玄气，连个七岁孩童都能轻易欺辱。被排挤，被退婚，被逼至山崖边缘。平静的渴望粉身碎骨。她仰天大喝：“今日不死，他日必当凌驾于你这瞎了眼的苍天之上！”神秘遣址？无人兽山？想进就闯了！上古神兽？紫光战甲？想要就拿了！地玄了不起吗？武玄很牛叉吗？真玄又算哪颗葱？惹恼本小姐，我让你们求生无路，寻死无门！遇神杀神，遇魔屠魔，普天之下，唯我至尊！
                    </p>
                    <div class="autor">
                        <a href="#">夜月业</a> <span class="text-b">36万读过</span>
                    </div>
                </div>
            </div>
        </div>

         <!-- 出版精选 -->
         <div class="list">
            <div class="top-m">
                <a href="#" title="出版精选" class="list-title">
                    <span>出版精选</span><i class="icon-arrow-r"></i>
                </a>
            </div>
            <div class="list-main" style="background-image: url(./img/column-bg2.png);">
                <div class="list-one" title="长安的荔枝">
                    <div class="book">
                        <img src="./img/chuban05.jpg" alt="长安的荔枝">
                        <p class="name">长安的荔枝</p>
                    </div>
                    <p class="intro">
                        同名实体书新鲜上市，马伯庸历史短小说“见微”系列神作！大唐天宝十四年，长安城小吏李善德突然接到一个任务：要在贵妃诞日之前，从岭南运来新鲜荔枝。荔枝保鲜期只有三天，而岭南距长安五千余里，山水迢迢，这是个不可能完成的任务。为了家人，李善德只得放手一搏……古装版社畜求生记，帝国夹缝中的小人物史诗。
                    </p>
                    <div class="autor">
                        <a href="#">马伯庸</a> <span class="text-b">5万读过</span>
                    </div>
                </div>
                <div class="list-one" title="悉达多">
                    <div class="book">
                        <img src="./img/cbjx06.jpg" alt="悉达多">
                        <p class="name">法律的悖论</p>
                    </div>
                    <p class="intro">
                        《法律的悖论》是中国政法大学罗翔教授普法新作。思考生活中的法律问题，常常让我们觉得十分烧脑，一起案件可能推导出相互矛盾的立场，而且这两个立场居然还都非常合理？这都是因为法律中存在着似非而是的悖论。法律中充满着悖论，有些是真悖论，有些是假悖论。罗老师在书中通过14个经典案件，辨析了法律与案件中的盲区，帮助我们看清法治的核心。探讨和思考法律中的悖论，能够锻炼我们的思维，走出偏见与独断，接受多元与包容。
                    </p>
                    <div class="autor">
                        <a href="#">罗翔</a> <span class="text-b">13.6万读过</span>
                    </div>
                </div>
                <div class="list-one" title="活着">
                    <div class="book">
                        <img src="./img/cbjx03.jpg" alt="活着" height="120px">
                        <p class="name">活着</p>
                    </div>
                    <p class="intro">                        
                        《活着》是一篇读起来让人感到沉重的小说。那种只有阖上书本才会感到的隐隐不快，并不是由作品提供的故事的残酷造成的。毕竟，作品中的亡家，丧妻，失女以及白发人送黑发人这样的故事并不具备轰动性。同时，余华也不是一个具有很强煽动能力的作家，实际上，渲染这样的表达方式是余华一直所不屑的。余华所崇尚的只是叙述，用一种近乎冰冷的笔调娓娓叙说一些其实并不正常的故事。而所有的情绪就是在这种娓娓叙说的过程中中悄悄侵入读者的阅读。这样说来，《活着》以一种渗透的表现手法完成了一次对生命意义的哲学追问。本书荣获意大利格林扎纳·卡佛文学奖（1998年）、台湾《中国时报》十本好书奖（1994年），香港“博益”15本好书奖（1990年），中华图书特殊贡献奖（2005年），法国国际信使外国小说奖（2008年）；并入选香港《亚洲周刊》评选的“20世纪中文小说百年百强”；入选中国百位批评家和文学编辑评选的“九十年代最有影响的10部作品”，余华本人则于2004年荣获法兰西文学和艺术骑士勋章。
                    </p>
                    <div class="autor">
                        <a href="#">余华</a> <span class="text-b">69万读过</span>
                    </div>
                </div>
                <div class="list-one" title="许三观卖血记（第3版）">
                    <div class="book">
                        <img src="./img/cbjx04.jpg" alt="许三观卖血记（第3版）">
                        <p class="name">许三观卖血记（第3版）</p>
                    </div>
                    <p class="intro">
                        本书在国内外引起了巨大轰动！小说以博大的温情描绘了磨难中的人生，以激烈的故事形式表达了人在面对厄运时求生的欲望。讲述了许三观靠着卖血渡过了人生的一个个难关，战胜了命运强加给他的惊涛骇浪，而当他老了，知道自己的血再也没有人要时，他哭了。法国《读书》杂志在评论《许三观卖血记》时说道：这是一部精妙绝伦的小说，是朴实简洁和内涵意蕴深远的完美结合。本书获美国巴恩斯-诺贝尔新发现图书奖，入选中国百位批评家和文学编辑评选的“20世纪90年代最有影响的10部作品”。
                    </p>
                    <div class="autor">
                        <a href="#">余华</a> <span class="text-b">47万读过</span>
                    </div>
                </div>
                <div class="list-one" title="我与地坛">
                    <div class="book">
                        <img src="./img/cbjx05.jpg" alt="我与地坛">
                        <p class="name">我与地坛</p>
                    </div>
                    <p class="intro">                        
                        史铁生的散文集。史铁生是当代中国最令人敬佩的作家之一。他的写作与他的生命完全同构在了一起，在自己的“写作之夜”，史铁生用残缺的身体，说出了最为健全而丰满的思想。他体验到的是生命的苦难，表达出的却是存在的明朗和欢乐，他睿智的言辞，照亮的反而是我们日益幽暗的内心。地坛只是一个载体，而文章的本质却是一个绝望的人寻求希望的过程，以及对母亲的思念。
                    </p>
                    <div class="autor">
                        <a href="#">史铁生</a> <span class="text-b">76万读过</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 秒杀模块 -->
        <div class="miaosha-box">
            <div class="miaosha-t">
                <div class="top-l">
                    <h2>今日<span class="text-b">秒杀</span></h2>
                    <div class="time">
                        <span id="hour"></span>:<span id="fen"></span>:<span id="miao"></span>
                    </div>
                </div>
                <div class="top-r">已有9139人抢到</div>
            </div>
            <div class="miaosha-m">
                <div class="miaosha-item">
                    <div class="book">
                        <img src="./img/chuban06.jpg" height="220px" width="100%">
                        <p class="name">小王子</p>
                    </div>
                    <div class="mf"><span>免费</span></div>
                </div>
                <div class="miaosha-item">
                    <div class="book">
                        <img src="./img/miaosha02.jpg" height="220px" width="100%">
                        <p class="name">港岛夜浓</p>
                    </div>
                    <div class="mf"><span>免费</span></div>
                </div>
                <div class="miaosha-item">
                    <div class="book">
                        <img src="./img/miaosha03.jpg" height="220px" width="100%">
                        <p class="name">重生之国宝竟是我自己</p>
                    </div>
                    <div class="mf"><span>免费</span></div>
                </div>
                <div class="miaosha-item">
                    <div class="book">
                        <img src="./img/chuban05.jpg" height="220px" width="100%">
                        <p class="name">长安的荔枝</p>
                    </div>
                    <div class="mf"><span>免费</span></div>
                </div>
                <div class="miaosha-item">
                    <div class="book">
                        <img src="./img/miaosha05.jpg" height="220px" width="100%">
                        <p class="name">全职高手</p>
                    </div>
                    <div class="mf"><span>免费</span></div>
                </div>
            </div>
        </div>

        <!-- 新闻资讯手风琴 -->
        <div class="zixun">
            <h2>最新资讯</h2>
            <button class="btn">仙症(葛优、王俊凯主演《刺猬》原著小说)</button>
            <div class="panel">
                <p>幻想自己曾在潜艇服役的精神病人，阳机场里寂寞的驱鸟员，穷鬼乐园,酗酒，黑夜，旅行者的浪迹，男孩与父亲的长久的告别….世纪之交的北方城市里，人物始终处于失落之中，本书是郑执凭借短篇《仙症》获2018年'鲤·匿名作家计划"首奖和2019年首届《钟山》之星"年度青年佳作奖后的全新作品，收录有被苏童称赞”贡献了一个新的人物形象”的《仙症》、发表于《收获》2019年“青年作家小说专辑的《蒙地卡罗食人记》，及中篇新作《森中有林》等小说六篇。魔幻故事和侦探小说元素杂燥、浓规的地域色彩、特别的日常生活形态，以口语的简洁和幽默的声调讲述，诉说着一个男孩所完成的对于自身命
                    运的出逃与回归。</p>
            </div>

           <button class="btn">百岁大爷网恋奔现，我真是00后</button>
            <div class="panel">
                <p>云墨是世界上唯一的金丹期强者，在民国末期开始闭关，七十年出关而来，已经是全新的世界!他很快被互联网的精彩所吸引，并且在网上认识了一个漂亮的高材生女神苏青鸾。苏青鸾很快被云墨的知识渊博所吸引，两个人奔现!苏青鸾:大爷，我网恋男友云墨呢?云墨:我就是你男友!苏青鸾:你一个君大爷，居然谎称00后?云墨:我真是00后!苏青鸾人没了，自己交了一个00后网恋男友?而且是全世界
                    年纪最大的00后?但后续发现，这个大爷好像没那么简单?</p>
            </div>

            <button class="btn">肾结石?不，那是我的金丹</button>
            <div class="panel">
                <p>[杀伐果断!强势无敌!魔道!]首富之子顾长青得了一百多颗肾结石，因他行为举止古怪，加上自言肾结石是金丹，每天疼的死去活来还乐在其中，甚至还想多长几颗，被当成了精神病，送入了精神病院。殊不知，蓝星即将一场浩劫，灵气复苏，虚空裂缝蔓延，无数强大可怕的域外邪魔入侵。在灵气复苏这一刻，顾长青体内的一百零八颗肾结石，竟都化作金丹。在别人尚处于炼气期，在域外邪魔手中苦苦挣扎时，顾长青已经一举成为身怀一百零八颗金丹的结丹境大能。并在疯狂的猎杀邪魔，炼制万魂
                    番。邪魔不够怎么办?直接横渡汪洋，将整个樱花岛炼化掉。</p>
            </div>
        </div>
    </div>
    <!-- 返回顶部模块 -->
    <div class="backtop">
        <img src="./img/tubiao.png" height="100%" width="100%" alt="">
    </div>
        
    <!-- 脚部模块 -->
    <footer>
        <div class="footer-l">
            <img src="./img/logo.png" width="120px" alt="">
            <p class="copyright" data-v-c28a83fa="">
                Copyright (C) 2024 book.qq.com All Rights Reserved 上海阅文信息技术有限公司 版权所有
            </p>
            <a href="#" class="download">下载APP</a>
        </div>
        <div class="footer-r">
            <dl>
                <dt>关于QQ阅读</dt>
                <dd><a href="#">关于腾讯</a></dd>
                <dd><a href="#">About Tencent</a></dd>
                <dd><a href="#">服务协议</a></dd>
                <dd><a href="#">客户服务</a></dd>
                <dd><a href="#">帮助</a></dd>
            </dl>
            <dl>
                <dt>更多信息</dt>
                <dd><a href="#"> 开放平台</a></dd>
                <dd><a href="#">违规举报</a></dd>
                 <dd><a href="#">起点中文网</a></dd>
                <dd><a href="#">潇湘书院</a></dd>
                <dd><a href= "#">红袖添香</a></dd>
            </dl>
            <dl>
                <dt>登录/注册</dt>
                <dd><a href="login.html">登录</a></dd>
                <dd><a href="register.html">注册</a></dd>
            </dl>
            
        </div>
    </footer>

     <!-- js -->
    <script src="./js/main.js"></script>
    <script>            
        // 焦点图
        arr = ["./img/banner1.png","./img/banner2.jpg","./img/banner3.png","./img/banner4.png"]
        // 获取元素 
        var lis = document.querySelectorAll('.indicator li') //指示器
        var pic = document.querySelector("#pic")
        var index = 0;
        var timer;
        // 指示器点击事件
        lis.forEach((li,index)=>{
            li.addEventListener('click',function() {
                // 消灭其他人
                lis.forEach(i=>i.classList.remove('number'))
                // 再给自己加上 图片也要跟着变
                li.classList.add('number')
                pic.src = arr[index]
                console.log(index)
            })
        })
        function show() {
           index = ++index % arr.length
            // 更换图片路径
            pic.src = arr[index]
            // 激活指示器
                // 移除原来的类
            lis.forEach(i=>i.classList.remove('number'))
            lis[index].classList.add('number')
            timer = setTimeout("show()",3000);
            console.log(`自动${index}`)
        }
        show()

        // 鼠标移入时停止定时器
        var banner = document.querySelector('.banner-m')
        banner.addEventListener('mouseenter' ,function() {
            clearTimeout(timer)
        })
        // 鼠标移出再开定时器
        banner.addEventListener('mouseleave' ,function() {
            timer = setTimeout("show()",1000);
        })

        
        // 秒杀功能
        function miaoSha() {
            // 得到现在的时间
            var curDate = new Date()
            var shi = curDate.getHours()
            var fen = curDate.getMinutes()
            var miao = curDate.getSeconds()   
            // 得到结束时间
            var endDate = new Date()
            var endh = endDate.setHours(23,59,59,999)
            console.log(endh)     
            
            // 时间差
            var j = (endh - curDate) / 1000
            console.log(j)
            var h = parseInt(j / 3600)
            var m = parseInt((j % 3600) / 60)
            var s = parseInt(j % 60)
            console.log(`${h},${m},${s}`)
             // +0
            h = h < 10 ? "0" + h : h
            m = m < 10 ? "0" + m : m
            s = s < 10 ? "0" + s : s
            document.querySelector('.time #hour').innerHTML = h
            document.querySelector('.time #fen').innerHTML = m
            document.querySelector('.time #miao').innerHTML = s            
        }
        setInterval("miaoSha()",1000)
        miaoSha()

        // 手风琴
        var btn = document.querySelectorAll('.btn')
        var panels = document.querySelectorAll('.panel')
        btn.forEach((item,index)=> {
            item.addEventListener('click',function() {
                item.classList.toggle('active')
                panels[index].style.maxHeight = panels[index].style.maxHeight ? null : panels[index].scrollHeight + 'px'
            })
        })
        
    </script>
</body>
</html>